<template>
	<view class="content flex-column bg-sub">
		<van-notify id="van-notify" />
		<view class="scroll-y full-width flex-grow" hover-class="none" hover-stop-propagation="false">
			<view class="m-xl bg-white radius-lg shadow-lg p-lg">
				<van-cell-group insert :border="false">
					<van-field :value="patient.name" label="姓名" placeholder="请输入姓名" @change="nameOnChange" />
					<van-field :value="genderList[patient.gender]" is-link readonly label="性别" placeholder="请选择性别"
						@tap.native="genderSwitch = true" />
					<van-popup :show="genderSwitch" round position="bottom" @close="popupClose">
						<van-picker :show-toolbar="true" :columns="genderOptions" @confirm="genderOnFinish"
							@cancel="popupClose" />
					</van-popup>
					<van-field :value="cardTypeText" is-link readonly label="证件类型" placeholder="请选择证件类型"
						@tap.native="cardTypeSwitch = true" />
					<van-popup :show="cardTypeSwitch" round position="bottom" @close="popupClose">
						<van-picker :show-toolbar="true" :columns="cardTypeOptions" @confirm="cardTypeOnFinish"
							@cancel="popupClose" />
					</van-popup>
					<van-field v-if="cardType == 'id'" :value="patient.idCard" label="身份证号" placeholder="请输入身份证号"
						@change="idCardOnChange" />
					<van-field v-if="cardType == 'mi'" :value="patient.miCard" label="医保卡号" placeholder="请输入医保卡号"
						@change="miCardOnChange" />
					<van-field :value="patient.telphone" label="电话" placeholder="请输入电话" @change="telphoneOnChange"
						readonly />
					<van-field :value="areaCodeText" is-link readonly label="所在区域" placeholder="所在区域"
						@tap.native="areaSwitch = true" />
					<van-popup :show="areaSwitch" round position="bottom" @close="popupClose">
						<van-area :area-list="areaList" @cancel="popupClose" @confirm="areaOnFinish" />
					</van-popup>
				</van-cell-group>

			</view>

		</view>
		<button class="full-width linear-bg text-inverse btn-submit" @click="submit">提交</button>
	</view>
</template>

<script>
import Notify from '@/wxcomponents/vant/notify/notify';
import constants from '@/constants/index'
import {
	GetUser
} from '@/api/modules/business'
import {
	GetAreaList,
	GetOnePatient,
	EditPatient
} from '@/api/modules/registration'
export default {
	components: {

	},
	data() {
		return {
			cardTypeSwitch: false,
			genderSwitch: false,
			areaSwitch: false,
			gender: '',
			genderList: constants.gender,
			genderOptions: Object.entries(constants.gender).map(([value, text]) => ({
				value,
				text
			})),
			cardTypeOptions: Object.entries(constants.cardType).map(([value, text]) => ({
				value,
				text
			})),
			cardType: '',
			cardTypeText: '',
			areaList: {},
			patient: {},
			areaCodeText: ''
		}
	},
	onLoad() {

		this.init()

	},
	mounted() {

	},
	methods: {
		init() {
			this.cardTypeText = this.cardTypeOptions[0].text
			this.cardType = this.cardTypeOptions[0].value
			this.getAreaList()
			this.getUserInfo()
		},
		getUserInfo() {
			GetUser().then(res => {
				if (res.Code == 200 && res.Data && res.Data.Phone) {
					this.getOne(res.Data.Phone)
					return
				}
				Notify({
					type: 'danger',
					message: '微信用户获取失败'
				});
			})
		},
		getOne(e) {
			GetOnePatient({
				telphone: e
			}).then(res => {
				console.log(res)
				if (res.code == 200 && res.data) {
					this.patient = res.data
					this.areaCodeText = res.data.areaCodeLabel
				}
			})
		},

		getAreaList() {
			GetAreaList({
				type: "wxwp",
			},).then(res => {
				console.log(res)
				if (res.code == 200) {

					this.areaList = res.data

				}
			})
		},
		editPatient() {
			EditPatient(this.patient).then(res => {
				console.log(res)
				if (res.code == 200) {
					Notify({
						type: 'success',
						message: '修改成功'
					});
				}
			})
		},
		hideKeyboard() {
			uni.hideKeyboard()
		},

		submit() {
			this.editPatient()

		},
		popupClose() {
			this.genderSwitch = false
			this.cardTypeSwitch = false
			this.areaSwitch = false
		},
		nameOnChange(e) {
			this.patient.name = e.detail
		},
		genderOnFinish(e) {
			const {
				value
			} = e.detail;
			this.patient.gender = value.value
			this.popupClose()

		},
		cardTypeOnFinish(e) {
			const {
				value
			} = e.detail;
			this.cardType = value.value
			this.cardTypeText = this.cardTypeOptions.find((fi) => fi.value == value.value).text
			this.popupClose()
		},
		idCardOnChange(event) {
			this.patient.idCard = event.detail
		},
		miCardOnChange(event) {
			this.patient.miCard = event.detail

		},
		telphoneOnChange(event) {
			this.patient.telphone = event.detail

		},
		areaOnFinish(e) {
			console.log(e)
			let {
				values
			} = e.detail;
			values = values.filter((fi) => fi != undefined);
			const {
				code,
				name
			} = values[values.length - 1];
			this.patient.areaCode = code
			this.areaCodeText = name
			this.popupClose()
		}
	}
}
</script>

<style lang="scss" scoped>
.btn-submit {
	padding-bottom: env(safe-area-inset-bottom);
}
</style>